<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{$title}}</title>
        <meta name="description" content="description">
        <meta name="author" content="Evgeniya">
        <meta name="keyword" content="keywords">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{{ asset('assets/plugins/bootstrap/bootstrap.css')}}" rel="stylesheet">        
        <link href="{{ asset('assets/css/style.css')}}" rel="stylesheet">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
        
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
                <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
                <script src="http://getbootstrap.com/docs-assets/js/respond.min.js"></script>
        <![endif]-->
        <style>
          form { padding: 10px; }
          .error { color: red;font-weight: normal; }
          #page-login h3{ font-size: 30px;}
        </style> 

    </head>

<body>
<div class="container-fluid">
  <div id="page-login" class="row">
        <div class="col-xs-12 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
            <form id="loginID" class="form-inline" method="POST">
            <div class="box" style="text-align: center;">
                <div class="box-content">
                    <div class="text-center">
                        <h3 class="page-header">SabahKini Login</h3>
                    </div>
                       <div class="error" >
                       		@if($errors->any())
								{{$errors->first()}}
							@endif
					    </div>
                        <div class="form-group">
                            <label class="control-label">Username</label>
                            <input type="text" class="form-control" name="username" 
                            id = "username"
                            data-rule-required="true"
                            data-msg-required="Please enter your account !"
                            />
                        </div>
                        <div class="form-group">
                            <label class="control-label">Password</label>
                            <input type="password" class="form-control" name="password" 
                                id= "password"
                                data-rule-required="true"
                                data-msg-required="Please enter your password !"
                            />
                        </div>
                        <div class="text-center">
                        	<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                            <button  class="btn btn-primary">Sign in</button >
                        </div>                  
                </div>
            </div>           
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var $form = $("#loginID");
    $form.validate();
    $form.submit(function (event) {
      /*if ($form.validate().valid()) {
          event.preventDefault();
          alert("acction logic");
      }*/
    });
</script>